<script lang="ts" setup>
import server from '@/utils/server';
import BlogTitleBox from '@/components/BlogTitleBox.vue'
import Announcement from '@/components/Announcement.vue'
import { ref, onMounted } from 'vue';
import { useUsererStore } from '@/stores/user';
import {useBlogStore} from '@/stores/blogStore'

const userStore = useUsererStore()
const blogStore = useBlogStore()
const titleConList = ref<Array<any>>([])
const total = ref(0)

const pageChange = (current: number, size: number = 10) => {
    server.get('/api/blog/getAllList', {
      page: current,
      size
    }).then(res => {
      titleConList.value = res.data?.list
      total.value = res.data?.total
    })
}

if(userStore.userInfo?.realname){
  blogStore.searchMyblog()
}

onMounted(() => {
  pageChange(1)
})
</script>
<template>
  <div class="container mt-6 md:flex items-start">
    <BlogTitleBox title="社区动态" class="bg-white border md:w-9/12 md:mr-3 " @pageChange="pageChange" :isPagination="true"
      :total="total" :titleConList="titleConList"></BlogTitleBox>
    <div class="w-full md:w-3/12">
      <Announcement></Announcement>
      <BlogTitleBox title="个人动态" :loginCheck="true" class="bg-white w-full border mt-6"
        :titleConList="blogStore.myBlogList"></BlogTitleBox>
    </div>
  </div>
</template>